<template>
  <div class="selector-body">
    <el-input v-model="queryParams.spuName" style="position: relative;" clearable placeholder="请输入商品名称" @clear="handleQuery" @keyup.enter.native="handleQuery">
      <i slot="suffix" class="el-icon-search el-input__icon" />
    </el-input>
    <el-table v-loading="loading" :data="list" class="selector-list" highlight-current-row>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-check" @click="handleSelected(scope.row)">确认</el-button>
        </template>
      </el-table-column>
      <el-table-column label="名称" align="center" prop="spuName" />
      <el-table-column label="品牌" align="center" prop="brandName" />
      <el-table-column label="分类" align="center" prop="categoryName" />
      <el-table-column label="售价" align="center" prop="price" />
      <el-table-column label="库存" align="center" prop="stock" />
    </el-table>
  </div>
</template>

<script>
import SpuApi from '@/api/goods/SpuApi'

export default {
  name: 'SpuSelector',
  data() {
    return {
      queryParams: {
        spuName: null
      },
      list: [],
      loading: false
    }
  },
  methods: {
    handleQuery() {
      this.loading = true
      SpuApi.list(this.queryParams).then(response => {
        this.list = response.data
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handleSelected(name) {
      this.$emit('selected', name)
      document.body.click()
    },
    reset() {
      this.queryParams = {
        spuName: null
      }
      this.handleQuery()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .selector-body {
    width: 100%;
    padding: 10px;
    .selector-list {
      height: 400px;
      overflow-y: scroll;
      div {
        height: 30px;
        line-height: 30px;
        margin-bottom: -5px;
        cursor: pointer;
        width: 33%;
        float: left;
      }
      span {
        display: inline-block;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }
</style>
